<template>
  <div class="massifBox massifBox2">
      <div class="massifPage" :style="{width:leftWidth,height:leftHeight}">
        <slot name="left"/>
      </div>
      <div class="mapbox">
        <div class="backBtn" v-if="showBack" @click="goBack"><img src="/src/assets/back.png" alt="">返回</div>
        <slot/>
      </div>
  </div>
</template>

<script setup>
// 这里的name是为了做页面缓存，其值要跟路由里面的name值一样

import { nextTick, ref, watch, onActivated,reactive,onMounted} from 'vue'
import{useRouter,useRoute} from "vue-router"
const router = useRouter()
const emit = defineEmits(['back'])
const props = defineProps({
  leftWidth:'',
  leftHeight:'auto',
  showBack:{
    type:Boolean,
    default:false
  },
  backUrl:''
})

onMounted(()=>{
  //initMap()
})

const goBack = ()=>{
  if(props.backUrl){
    router.push({path:props.backUrl})
  }else{
    emit('back')
  }
}
</script>

<style lang="scss" scoped>
  .massifBox{
      display: flex;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      &.massifBox2{
        display:block;
        position: relative;
        z-index: 2000;
        .massifPage{
          position: absolute;
          z-index: 2000;
          left: 10px;
          top: 10px;
          height: auto;
          // max-height: calc(100vh - 84px);
          margin: 0;
        }
        .mapbox{
          position: static;
        }
      }
      .massifPage{
          width: 380px;
          height: calc(100vh - 84px);
          box-sizing: border-box;
          background-color: #fff;
          box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px;
          padding: 0;
          margin: 0 10px 0 0;
          //overflow: hidden;
          //overflow-y: auto;
          
      }
      .mapbox{
          flex: 1;
          box-sizing: border-box;
          background: #666565;
          width: 100%;
          height: calc(100vh - 124px);
          overflow: hidden;
          position: relative;
          z-index: 1000;
          .backBtn{
            display: flex;
            position: absolute;
            z-index: 1001;
            width: 70px;
            height: 34px;
            background: #FFFFFF;
            border-radius: 3px;
            border: 1px solid #DDDDDD;
            right: 20px;
            top: 20px;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
            img{
              height: 16px;
              margin: 0 4px 0 0;
            }
            &:hover{
              background: #7eca82;
              cursor: pointer;
              border: 1px solid #7eca82;
            }
          }
      }
  }
</style>
